<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="
        openType == 1
          ? '课堂表现分'
          : openType == 2
          ? '课后作业分'
          : '课堂表现分'
      "
      :visible="open"
      width="950px"
      append-to-body
      @close="cancel()"
    >
      <!-- 顶部数据 -->
      <div class="line flexColCenter flexBet">
        <div class="flex">
          <div class="line_item flex">
            <div class="line_lable">课程:</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="topInfo.courseName"
              placement="top-start"
            >
              <div class="line_value overTxt" style="width: 107px">
                {{ topInfo.courseName }}
              </div></el-tooltip
            >
          </div>
          <div class="line_item flex">
            <div class="line_lable">班级:</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="topInfo.className"
              placement="top-start"
            >
              <div class="line_value overTxt" style="width: 107px">
                {{ topInfo.className }}
              </div></el-tooltip
            >
          </div>
          <div class="line_item flex">
            <div class="line_lable">
              班级{{
                openType == 1
                  ? "课堂表现分"
                  : openType == 2
                  ? "作业分"
                  : "课堂表现分"
              }}:
            </div>
            <div class="line_value overTxt" style="width: 71px">
              {{ topInfo.avgScore ? topInfo.avgScore.toFixed(2) : "--" }}
            </div>
          </div>
          <div class="line_item flex">
            <div class="line_lable">
              个人{{
                openType == 1
                  ? "课堂表现分"
                  : openType == 2
                  ? "作业分"
                  : "课堂表现分"
              }}:
            </div>
            <div class="line_value overTxt" style="width: 71px">
              {{
                topInfo.normalScore || topInfo.normalScore == "0"
                  ? topInfo.normalScore.toFixed(2)
                  : "--"
              }}
            </div>
          </div>
        </div>
        <el-button
          v-preventReClick
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        style="margin-top: 20px"
        height="520px"
        v-loading="loading"
        :data="postList"
      >
        <el-table-column
          label="打分"
          prop="score"
          sortable
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div v-if="openType != 2">
              {{
                scope.row.score > 0 ? `+${scope.row.score}` : scope.row.score
              }}
            </div>
            <div v-if="openType == 2">{{ scope.row.score }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="打分教师"
          show-overflow-tooltip
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.teacherName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="打分时间"
          prop="operateTime"
          sortable
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div>{{ parseTime(scope.row.operateTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="打分备注" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ scope.row.remark ? scope.row.remark : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          width="130"
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDel(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 平时分打分组件 -->
    <usuallyAddDialog
      :open.sync="usuallyAddDialog_open"
      :type="usuallyAddDialog_type"
      :openType="openType"
      :usuallyItem="usuallyItem"
      :courseStuId="courseStuId"
      :usuallyTopInfo="topInfo"
      @refreshList="getList"
    >
    </usuallyAddDialog>
  </div>
</template>

<script>
import {
  getcourseStuNormal,
  deletecourseStuNormal,
} from "@/api/usually/usually";
import usuallyAddDialog from "@/components/usuallyAddDialog.vue";
export default {
  components: {
    usuallyAddDialog,
  },
  props: {
    open: Boolean,
    courseStuId: [String, Number],
    usuallyTopInfo: {},
    //openType:  1-->课堂表现    2-->课后作业  3-->课堂表现分
    openType: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      topInfo: {
        avgScore: 0,
        normalScore: 0,
        courseName: "",
        className: "",
      },
      usuallyAddDialog_open: false,
      usuallyAddDialog_type: 1,
      usuallyItem: {},
      total: 0,
      postList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
      },
    };
  },
  watch: {
    open(e) {
      if (e) {
        this.topInfo = this.usuallyTopInfo;
        this.getList();
      }
    },
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.usuallyAddDialog_type = 1;
      this.usuallyAddDialog_open = true;
    },
    handleEdit(row, index) {
      this.usuallyAddDialog_type = 2;
      this.usuallyAddDialog_open = true;
      this.usuallyItem = row;
    },
    /* 删除按钮 */
    async handleDel(row, index) {
      this.$confirm(
        `确定删除该条打分记录吗？删除后将会同步至教务端及学生端！`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          await deletecourseStuNormal(row.id);
          this.$modal.msgSuccess("删除打分记录成功");
          this.getList();
        })
        .catch(() => {
          this.$modal.msgInfo("已取消");
        });
    },
    async getList() {
      this.loading = true;
      let params = {
        //课后作业type：2，其他是1
        type: this.openType == 2 ? 2 : 1,
      };
      let res = await getcourseStuNormal(this.courseStuId, params);
      this.postList = res.data.list;
      if (this.openType == 2) {
        this.topInfo.avgScore = res.data.avgHomeworkScore;
        this.topInfo.normalScore = res.data.homeworkScore;
      } else {
        this.topInfo.normalScore = res.data.usualScore;
        this.topInfo.avgScore = res.data.avgUsualScore;
      }
      this.loading = false;
    },
    cancel() {
      this.$emit("update:open", false);
      this.$emit("refresh", true);
    },
  },
};
</script>
<style scoped lang="scss">
.line {
  width: 100%;
  margin-bottom: 15px;
}
.line_item {
  box-sizing: border-box;
  padding-right: 15px;
  width: 180px;
}
.line_lable {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(153, 153, 153, 1);
}
.line_value {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: rgba(51, 51, 51, 1);
}
</style>
